<template>
  <!-- 全选框影响小选框
  需求:获取到全选框的状态(isAll计算属性值),全选框状态同步给所有的小选框

  思路:
  1.isAll改成完整写法 set获取到全选框的状态值
  2.遍历数据数组 赋值给所有小选框v-model关联的c属性
  3.小选框的勾选状态 在对象里的c属性
  4.遍历所有对象 把对象的c属性取反值 再赋值回去
  -->
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">反选</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "沙和尚",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
      ],
    };
  },

  computed: {
    isAll: {
      get(){
        // 取值    小选框 影响 全选
        // 用every方法 遍历arr数组  当遍历到某一个值不满足条件时，函数立即返回false，不再继续遍历
        return this.arr.every(p => p.c === true)
      },
      set(val){
        // 赋值
        // 拿到全选框的状态 赋值给每个小选框
        this.arr.forEach((p=> p.c = val))
      }
    },
  },
  methods: {
    btn() {
      // 所有小选框的状态都取反
      this.arr.forEach(p => p.c = !p.c)
    },
  },
};
</script>

<style>
</style>